<template>
  <div>
    <!-- 上面的导航栏 -->
    <van-nav-bar title="小区名称" left-arrow @click-left="$router.back()">
    </van-nav-bar>
    <div class="main">
      <div class="houseImg">
        <img
          src="https://img2.baidu.com/it/u=1344818959,2590008156&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
          alt=""
        />
      </div>
      <!-- 房屋价格信息等 -->
      <div class="houseDetail">
        <div class="houseTit">
          <p>发布的标题哦</p>
          <div class="houseyd">
            <span>近地铁</span>
          </div>
        </div>
        <div class="housePrice">
          <div class="price">
            2345
            <span>/月</span>
            <p>租金</p>
          </div>
          <div class="price">
            一室
            <p>房型</p>
          </div>
          <div class="price">
            100平米
            <p>面积</p>
          </div>
        </div>
        <div class="housezx">
          <div class="housexj">装修 : <span>精装</span></div>
          <div class="housexj">朝向 :<span>东</span></div>
          <div class="housexj">楼层 :<span>高楼层</span></div>
          <div class="housexj">类型 :<span>普通住宅</span></div>
        </div>
      </div>
      <!-- 小区地图信息配套设备 -->
      <div class="housexx">
        <div class="housexq">
          <p style="font-size: 14px">小区：你的小区名称</p>
        </div>
        <div class="houseAmp">
          <img src="" alt="" />
        </div>
        <div class="housepz">房屋配置</div>
        <div>
          <ul>
            <li>
              <span class="iconfont icon-yigui"></span>
              <div>衣柜</div>
            </li>
            <li>
              <span class="iconfont icon-xiyiji"></span>
              <div>洗衣机</div>
            </li>
            <li>
              <span class="iconfont icon-kongdiao"></span>
              <div>空调</div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 房源概况 -->
      <div class="housegk">
        <div class="housepz">房源概况</div>
        <div class="housegk-homer">
          <img src="http://liufusong.top:8080/img/avatar.png" alt="" />
          <div class="house-name">
            王女士
            <p>已认证房主</p>
          </div>
          <div class="house-fxx">发信息</div>
        </div>
        <div class="housegk-text">
          1.周边配套齐全，地铁四号线陶然亭站，交通便利，公交云集，距离北京南站、西站都很近距离。2.小区规模大，
          配套全年，幼儿园，体育场，游泳馆，养老院，小学。3
          人车分流，环境优美。4精装两居室，居家生活方便，还
          有一个小书房，看房随时联系。
        </div>
      </div>
      <!-- 猜你喜欢 -->
      <div class="house-ulike">
        <div class="housepz">猜你喜欢</div>
        <div class="ulike-list">666</div>
      </div>
    </div>
    <div class="kong"></div>
    <div class="bottom">
      <div class="sc">收藏</div>
      <div class="sc">在线咨询</div>
      <div class="call">电话预约</div>
    </div>
    <!-- <van-tabbar v-model="active" fixed>
  <van-tabbar-item >收藏</van-tabbar-item>
  <van-tabbar-item >在线咨询</van-tabbar-item>
  <van-tabbar-item >电话预约</van-tabbar-item>
</van-tabbar> -->
  </div>
</template>

<script>
export default {
  name: 'Detail'
}
</script>

<style lang="less" scoped>
.houseImg img {
  width: 375px;
  height: 210px;
}
.houseTit {
  font-size: 16px;
  border-bottom: 1px solid #cecece;
}
.houseyd {
  width: 46px;
  height: 20px;
  color: #39becd;
  background: #e1f5f8;
  font-size: 12px;
  text-align: center;
  border-radius: 3px;
  line-height: 20px;
  margin-bottom: 15px;
}
.houseDetail {
  height: 250px;
  padding: 15px;
  //   background-color: rgba(253, 221, 226, 0.45);
  .housePrice {
    display: flex;
    height: 84px;
    border-bottom: 1px solid #cecece;
  }
  .price {
    color: #fa5741;
    font-size: 18px;
    font-weight: bolder;
    width: 110px;
    text-align: center;
    margin-top: 15px;
    p {
      font-size: 14px;
      color: #999;
      font-weight: normal;
      margin-top: 3px;
    }
    span {
      color: #fa5741;
      font-size: 12px;
      font-weight: normal;
    }
  }
}
.housezx {
  margin-top: 15px;
  flex-wrap: wrap;
  display: flex;
  font-size: 13px;
  .housexj {
    width: 160px;
    color: #999;
    padding-right: 5px;
    line-height: 26px;
    span {
      color: #333;
      margin-left: 7px;
    }
  }
}
.houseAmp {
  height: 145px;
  background-color: pink;
  padding: 0;
  img {
    height: 145px;
  }
}
.housexq {
  margin-top: 20px;
}
.main {
  background-color: #f6f5f6;
  margin-bottom: 50px;

  // padding-left: 15px;
}
.housepz {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 10px;
  padding: 15px 0;
  border-bottom: 1px solid #cecece;
}
.iconfont {
  font-size: 20px;
  .icon-yigui {
    font-style: 800;
  }
}
ul {
  display: flex;
  margin-left: 5px;
  width: 370px;
  height: 70px;
  flex-wrap: wrap;
  margin-top: 5px;
}
/deep/ ul li {
  text-align: center;
  width: 70px;
  height: 50px;
}
li div {
  font-size: 14px;
}
.housexx {
  padding: 15px;
}
.housegk {
  padding: 15px;
}
.housegk-homer {
  display: flex;
  img {
    width: 52px;
    height: 52px;
    margin: 10px 10px 0 0;
  }
  p {
    font-size: 12px;
    color: #fa5741;
    margin-top: 4px;
    margin-bottom: 0;
  }
}
.house-name {
  font-size: 14px;
  margin-top: 15px;
  width: 120px;
}
.house-fxx {
  margin-top: 15px;
  width: 70px;
  height: 27px;
  color: #33be85;
  border: 1px solid #33be85;
  border-radius: 3px;
  text-align: center;
  font-size: 14px;
  line-height: 27px;
  margin-left: 70px;
}
.housegk-text {
  margin-top: 20px;
  font-size: 14px;
}
.house-ulike {
  padding: 15px;
  .ulike-list {
    height: 400px;
    background-color: pink;
  }
}
// 底部固定
.bottom{
  width: 100%;
  position: sticky;
  bottom:0;
left:0;
 display: flex;
height: 50px;
z-index: 1;
 .sc{
  text-align: center;
    font-size: 17px;
    color: #999;
    line-height: 50px;
    width: 120px;
    border: 1px solid #cecece;
    background-color: #fff;
 }
 .call{
  text-align: center;
    font-size: 17px;
    line-height: 50px;
    width: 150px;
    background-color: #33be85;
    color: #fff;
 }
}
.kong{
  height: 100px;
}
</style>>
